<template>
    <div class="page-list-block" :class="[$route.fullPath.indexOf('trends')!= -1?'green':'blur-link']">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.name" :name="item.id" v-for="(item,index) in titleList" >
                <div class="tab-content-list" v-if="dataList.length>0">
                    <div v-for="(items,itemsIndex) in dataList" @click="jumpToInfo(itemsIndex)">
                        <div class="title-row tip" :class="[$route.fullPath.indexOf('trends')!= -1?'':'blur']"
                             v-if="!isPoint" >
                            <div class="row-type" @click.stop="changeType(itemsIndex)">【{{items.classname}}】</div>
                            <div class="title">{{items.title}}</div>
                            <div class="date">{{items.deploydate}}</div>
                        </div>
                        <div class="title-row point" v-else :class="[$route.fullPath.indexOf('trends')!= -1?'':'blur']">
                            <div class="point-info">
                                <div style="display: flex;align-items: center;max-width: 80%">
                                    <div class="row-point"></div>
                                    <div class="title">{{items.title}}</div>
                                </div>
                                <div class="date">{{items.deploydate}}</div>
                            </div>

                            <div class="row-link"></div>
                        </div>
                    </div>
                </div>
                <div class="no-data list" v-else>
                    <img :src="noDataImg"/>
                    <div>———— 暂无数据 ————</div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="tip-block" v-show="tipList.length>0 && !isPoint">
            <span class="tip-name" v-for="(item,index) in tipList" @click="resetType(index)">{{item.name}}<span class="icon">></span> </span>
        </div>

        <div class="table-footer">
            <el-pagination @current-change="handleCurrentChange" :page-size="30" layout="total, prev, pager, next,jumper" :page-count="listPages" :total="listTotal"></el-pagination>
        </div>
    </div>
</template>

<script>
    import noDataImg from '../../image/index/no_data.png'
    export default {
        name: "page-list-block",
        props:{
            titleList:Array,
            dataList:Array,
            listTotal:Number,
            listPages:Number,
            //判断是否用标签
            isPoint:{
                type:Boolean,
                default:false
            }
        },
        data(){
          return{
              activeName:'0',
              tipList:[],
              noDataImg
          }
        },
        watch:{
          $route(){
              this.activeName='0';
              this.tipList = [];
          }
        },
        methods:{
            /**
             * 标题切换
             */
            handleClick(tab,e){
                // console.log(tab,e)
                this.$parent.checkTip(this.titleList,tab.index);
            },
            /**
             * 改变标签
             * @param index
             */
            changeType(index){
                // console.log(this.dataList[index]);
                this.tipList = [{name:this.titleList[this.activeName].name},{name:this.dataList[index].classname}];
                this.$parent.changeListType(this.dataList[index])

            },
            /**
             * 重置标签选则
             */
            resetType(index){
                if(index == 0){
                    this.tipList=[];
                    this.$parent.changeListType(null)
                }
            },
            // handleSizeChange(val){
            //     console.log('handleSizeChange',val)
            //
            // },
            /**
             * 列表翻页
             */
            handleCurrentChange(val){
                console.log('handleCurrentChange',val)
                this.$parent.pageCurrentChange(val);

            },

            // currentPage1(val){
            //     console.log('currentPage1',val)
            //
            // },
            /**
             * 跳转详情
             * @param index
             */
            jumpToInfo(index){
                // console.log('ss',index);
                this.$router.push({name: 'misArticle',query:{ sno: this.dataList[index].sno }})
            }
        }
    }
</script>

<style lang="scss" src="./index.scss" scoped>

</style>
